<template>
    <div id="app">
        <div class="col-8 offset-2">
            <table class="table caption-top table-hover">
                <caption class="text-center">
                    <h1>班级信息管理</h1>
                    <el-input type="text" placeholder="请输入班级名称" class="w-25" v-model="search_name"/><el-button type="success" @click="search">搜索</el-button>
                    <el-button type="warning" @click="centerDialogVisible = true">添加班级</el-button>
                    <el-dialog
                            title="添加班级信息"
                            :visible.sync="centerDialogVisible"
                            width="30%"
                            center>
                        <div>
                            <span>添加班级id</span><el-input v-model.number="newClass.classId"/>
                        </div>

                        <div>
                            <span>添加班级名称</span><el-input v-model="newClass.className"/>
                        </div>

                        <div>
                            <span>添加班级人数</span><el-input v-model.number="newClass.classStudentCount"/>
                        </div>

                        <div>
                            <span>添加班级描述</span><el-input v-model="newClass.classDescription"/>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addClass">添加</el-button>
                        </span>

                    </el-dialog>

                </caption>
                <thead>
                <tr>
                    <th scope="col">班级id</th>
                    <th scope="col">班级名称</th>
                    <th scope="col">班级人数</th>
                    <th scope="col">班级描述</th>
                    <th scope="col">操作</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <classroom v-for="cla in classroom_for_page" :key="cla.id" :classRoom="cla"></classroom>
                </tbody>
            </table>
            <div class="pagination-container">
            <el-pagination
                    v-show="!isSearched"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[4, 5, 6]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="classes.length">
            </el-pagination>
            </div>

            <VNode/>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import classroom from './ClassroomItem.vue';


export default {
    name: 'classroomTable',
    components: {
        classroom
    },

    data() {
        return {
            search_name:"",
            Page:1,
            classes: [],
            centerDialogVisible: false,
            newClass:{
                classId:"",
                className:"",
                classStudentCount:"",
                classDescription:"",
            },
            currentPage: 1,
            pageSize: 5
        };
    },

    methods: {
        getClasses() {
            axios({
                url: "http://localhost:8080/classes",
                method: "Get",
                params: {
                    page: this.currentPage,
                    number_per_page: this.pageSize
                }
            }).then(res => {
                console.log(res.data);
                this.classes = res.data;
            })
        },

        addClass(){
            axios({
                url: "http://localhost:8080/addClass",
                method: "Post",
                data:this.newClass
            })
            this.centerDialogVisible = false
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.getClasses();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.getClasses();
        },
        search(){
            axios({
                url: "http://localhost:8080/searchClass",
                method: "Post",
                data:{
                    className:this.search_name
                }
                }).then(res =>{
                    this.classes = res.data;
            })
        },
    },
    mounted() {
        this.getClasses();
    },

    computed: {
        classroom_for_page() {
            return this.classes.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
        }
    }
}

</script>

<style>
.pagination-container {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    background-color: #f4f4f4; /* 设置底部背景色 */
    padding: 10px; /* 设置底部内边距 */
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1); /* 底部添加阴影效果 */
}


</style>
